<template>
    <div>
        <div class="tab" style="display: flex;justify-content: space-around;margin-top: 30px;font-size: 14px;">
            <div class="tab" style="display: flex;align-items: center">
                <div>订单号</div>
                <div class="tabSearch" style="display: flex;">
                    <el-input style="margin: 0 10px ;" v-model="orderData" placeholder="请输入订单号"
                        @input="orderNum"></el-input>
                    <!-- <el-button type="primary" icon="el-icon-search" @click="searchExpert">搜索</el-button> -->
                </div>
            </div>
            <div class="tab" style="display: flex;align-items: center">
                <div>手机号</div>
                <div class="tabSearch" style="display: flex;">
                    <el-input style="margin: 0 10px ;" v-model="phoneNumber" placeholder="请输入手机号"
                        @input="phoneNum"></el-input>
                    <!-- <el-button type="primary" icon="el-icon-search" @click="searchExpert">搜索</el-button> -->
                </div>
            </div>
            <div style="display: flex;align-items: center">
                <div>订单状态</div>
                <el-select style="margin: 0 10px ;" v-model="orderStatus" placeholder="选择状态" @change="handleChange">
                    <el-option v-for="item in orderStatusList" :key="item.id" :label="item.nickname" :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <div style="display: flex;align-items: center">
                <div>支付类型</div>
                <el-select style="margin: 0 10px ;" v-model="orderType" placeholder="选择分类" @change="handleChangeType">
                    <el-option v-for="item in payTypeList" :key="item.id" :label="item.nickname" :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <div class="block">
                <span class="demonstration" style="margin-right: 10px;">订单创建时间</span>
                <el-date-picker v-model="value1" type="daterange" @change="handleDateChange" range-separator="至"
                    start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
            </div>

        </div>


        <div style="margin: 30px;">
            <span style="margin-right: 30px;">总充值：<span
                    style="font-weight: bold;color: red;">{{ sumData.all_money }}</span></span>
            <span>日充值：<span style="font-weight: bold;color: red;">{{ sumData.day_money }}</span></span>
        </div>


        <div style="display: flex;justify-content: flex-end; position: absolute;top: 100px; right:40px;">
            <el-button type="primary" @click="exportOrder">导出</el-button>
        </div>


        <el-table :data="tableData" style="width: 100%" :header-cell-style="{ 'text-align': 'center' }">
            <el-table-column prop="id" label="ID" align="center">

            </el-table-column>
            <el-table-column prop="out_trade_no" label="订单号" align="center">

            </el-table-column>
            <el-table-column prop="mobile" label="手机号" align="center">

            </el-table-column>
            <el-table-column prop="remark" label="备注" align="center">
            </el-table-column>
            <el-table-column prop="create_time" label="创建时间" align="center">

            </el-table-column>
            <el-table-column prop="pay_time" label="支付时间" align="center">
                <template slot-scope="scope">
                    <div v-if="scope.row.pay_time == null">
                        --
                    </div>
                    <div v-else>{{ scope.row.pay_time }}</div>
                </template>

            </el-table-column>
            <el-table-column prop="nickname" label="昵称" align="center">

            </el-table-column>
            <el-table-column prop="user_reg_time" label="注册时间" align="center">

            </el-table-column>
            <el-table-column prop="pay_lx_text" label="支付类型" align="center">

            </el-table-column>
            <el-table-column prop="status_text" label="订单状态" align="center">
                <template slot-scope="scope">
                    <div v-if="scope.row.status_text == '未购买'">
                        <el-tag type="success">未购买</el-tag>
                    </div>
                    <div v-else>
                        <el-tag type="danger">已购买</el-tag>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="origin_price" label="原价" align="center">

            </el-table-column>
            <el-table-column prop="gift_price" label="周六赠送金额" align="center">
                <template slot-scope="scope">
                    <div v-if="scope.row.gift_price == '1.00'">
                        寻胆爆冷会员
                    </div>
                    <div v-else-if="scope.row.gift_price == '0.00'">
                        未赠送
                    </div>
                    <div v-else>
                        {{  scope.row.gift_price  }}
                    </div>
                  
                </template>
            </el-table-column>
            <el-table-column prop="price" label="支付金额" align="center">

            </el-table-column>

        </el-table>

        <div class="tabListPage">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="pageSizes" :page-size="PageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { orderList } from '../../../libs/api'
export default {
    data() {
        return {
            tableData: [],
            orderData: '',
            orderType: '',
            phoneNumber: '',
            orderStatus: '',
            orderType: '',
            value1: '',
            orderStatusList: [{
                nickname: "未购买",
                id: '0'
            }, {
                nickname: "已购买",
                id: '1'
            }],
            payTypeList: [{
                nickname: "微信",
                id: '1'
            }, {
                nickname: "支付宝",
                id: '2'
            }, {
                nickname: "苹果支付",
                id: '3'
            }],
            allOodData: [],
            currentPage: 1,
            totalCount: 1,
            PageSize: 10,
            pageSizes: [5, 10],
            alltabData: [],
            orderTime: '',
            sumData: {}
        }
    },
    created() {
        this.getOrderList()
    },
    methods: {
        // 显示第几页
        handleCurrentChange(val) {
            // 改变默认的页数
            this.currentPage = val
            this.getOrderList()
        },
        // 分页
        // 每页显示的条数
        handleSizeChange(val) {
            // 改变每页显示的条数
            this.PageSize = val
            // 点击每页显示的条数时，显示第一页
            console.log(val)
            this.PageSize = val
            // 改变每页显示的条数时，要将页码显示到第一页
            this.currentPage = 1
            this.getOrderList()
        },
        handleDateChange(value) {
            console.log(value)
            this.orderTime = value[0] + "_" + value[1]
            const newDate1 = value[0].getFullYear() + '-' + (value[0].getMonth() + 1) + '-' + value[0].getDate();
            const newDate2 = value[1].getFullYear() + '-' + (value[1].getMonth() + 1) + '-' + value[1].getDate();
            console.log(newDate1 + '-' + newDate2)
            this.orderTime = newDate1 + '_' + newDate2
            this.getOrderList()
        },
        handleChangeType(value) {

        },
        handleChange(value) {

        },
        getOrderList() {
            orderList({
                page: this.currentPage,
                limit: this.PageSize,
                status: this.orderStatus,
                pay_lx: this.orderType,
                out_trade_no: this.orderData,
                order_time: this.orderTime,
                mobile: this.phoneNumber
            }).then(res => {
                console.log(res)
                this.tableData = res.data.list
                this.alltabData = res.data.list
                this.totalCount = res.data.total
                this.sumData = res.data.sum
            })
        },
        orderNum() {
            this.getOrderList()
        },
        phoneNum() {
            this.getOrderList()
        },
        handleChange() {
            this.getOrderList()
        },
        handleChangeType() {
            this.getOrderList()
        },
        exportOrder() {

            orderList({
                page: this.currentPage,
                limit: this.PageSize,
                status: this.orderStatus,
                pay_lx: this.orderType,
                out_trade_no: this.orderData,
                order_time: this.orderTime,
                mobile: this.phoneNumber,
                export: 1
            }).then(res => {

                window.location.href = res.data.url
                // console.log(res)
                // this.tableData = res.data.list
                // this.alltabData = res.data.list
                // this.totalCount = res.data.total
                // this.sumData = res.data.sum
            })


        }
    }
}
</script>
<style></style>
